<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import tdTheme from './theme.json' // 引入默认主题
import * as echarts from 'echarts'
export default {
  name: 'echart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    options: {
      type: Object,
      default: ()=>({})
    },
    tooltip: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      chart: null
    }
  },
  watch: {
    options: {
      handler (options) {
        if(this.chart) {
          // 设置true清空echart缓存
          setTimeout(()=>{
            this.chart.resize()
            this.chart.setOption(options, true)
          },200)
        }
        
      },
      deep: true,
      immediate:true,
    },
  },
  mounted () {
    this.initChart();
    echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题
    window.addEventListener('resize', () => {
      if(this.chart) {
        this.chart.resize()
      }
    })
  },
  beforeDestroy () {
    this.chart.dispose()
    this.chart = null
    window.removeEventListener('resize',null)
  },
  methods: {
    initChart () {
      // 初始化echart
      this.chart = echarts.init(this.$el, 'tdTheme')
      this.chart.setOption(this.options, true)
      this.extension()
    },
    extension(){
        var elementDiv = document.getElementById('extension')
        if(this.tooltip){
            if (!elementDiv) {
                var div = document.createElement('div')
              div.setAttribute('id', 'extension')
              div.style.display = 'block'
              document.querySelector('html').appendChild(div)
            }
            let that = this
            this.chart.on('mouseover', function (params) {
              if (params.componentType == that.tooltip) {
                var elementDiv = document.querySelector('#extension')
                //设置悬浮文本的位置以及样式
                var elementStyle =
                  'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
                elementDiv.style.cssText = elementStyle
                elementDiv.innerHTML = params.value
                document.querySelector('html').onmousemove = function (event) {
                  var elementDiv = document.querySelector('#extension')
                  var xx = event.pageX - 10
                  var yy = event.pageY + 15
                  elementDiv.style.top = yy + 'px'
                  elementDiv.style.left = xx + 'px'
                }
              }
            })
            this.chart.on('mouseout', function (params) {
              //注意这里，如果是x轴的话，需要改为xAxis
              if (params.componentType == that.tooltip) {
                var elementDiv = document.querySelector('#extension')
      
                elementDiv.style.cssText = 'display:none'
              }
            })
        }
      },
  }
}
</script>

<style>
</style>
